<template>
    <div class="msg-box" :style=" `animation-duration:${time/1000}s` ">{{ tip }}</div>
</template>

<script>
export default {
    data() {
        return {
            tip: "消息提示",
            time: 4000,
            timer: null
        };
    },
    methods: {
        doDestroyed() {
            clearTimeout(this.timer);
            document.body.removeChild(this.$el);
            this.$destroy();
            window.tipObj = null;
        }
    },
    mounted() {
        if (window.tipObj) {
            window.tipObj.doDestroyed();
        }
        window.tipObj = this;
        this.timer = setTimeout(() => {
            this.doDestroyed();
        }, this.time);
    }
};
</script>

<style scoped>
.msg-box {
    z-index: 999999;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px 16px;
    /* text-align: center; */
    transform: translate3d(-50%, -100%, 0);
    left: 50%;
    bottom: 120px;
    border-radius: 12px;
    font-size: 32px;
    opacity: 0;
    animation-name: messageFade;
    animation-iteration-count: 1;
    /* animation-duration: 4s; */
    /* animation: messageFade 4s 1; */
}

@keyframes messageFade {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -80%, 0);
    }
    16% {
        opacity: 1;
        transform: translate3d(-50%, 0%, 0);
    }
    84% {
        opacity: 1;
        transform: translate3d(-50%, 0%, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(-50%, -100%, 0);
    }
}
</style>
